<template>
  <el-dialog
      :title="title"
      :visible.sync="handleData.show"
      width="600px"
      :before-close="handleClose">

    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="出版商" prop="publisher">
        <el-input v-model="form.publisher"></el-input>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="翻译者" prop="translator">
        <el-input v-model="form.translator"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="submitData">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  import {  ApiDataSubmit } from '@/api/index'
  export default {
    name: "rowEdit",
    props: ['handleData'],
    data() {
      return {
        title: '新增',
        form: {
          publisher: '',
          title: '',
          translator: '',
          price: ''
        },
        rules: {
          publisher: [
            { required: true, message: '出版人必填', trigger: 'blur' },
          ],
        }
      }
    },
    created() {
      console.log(this.handleData, '111')
      // 新增
      if (parseInt(this.handleData.type) === 1) {
        this.title = '新增'
      } else if(parseInt(this.handleData.type) === 2) {
        this.title = '修改'
        this.form.publisher = this.handleData.row.publisher
        this.form.title = this.handleData.row.title
        this.form.translator = this.handleData.row.translator
        this.form.price = this.handleData.row.price
      }

    },
    methods: {
      // 关闭弹窗
      handleClose() {
        this.$emit('close')
      },
      // 数据提交
      submitData() {
        let vm = this
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {

            // 数据提交
            ApiDataSubmit(this.form).then(() => {
              // 提交成功后处理
              vm.$message.success('操作成功')
              vm.$emit('success') // 调用成功钩子
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
